<template>
  <div class="container">
    <Breadcrumb :items="['智慧临床药师工作站', '监护指标']" />
    <div class="mainContent">
      <a-scrollbar outer-class="leftBox">
        <LeftBox @click="leftBoxClick" />
      </a-scrollbar>
      <div class="rightBox">
        <PresInfo class="presInfoBox" :itemData="itemData" />
        <a-tabs style="background-color: #fff" v-model:activeKey="activeKey">
          <a-tab-pane key="1" title="指标趋势">
            <a-scrollbar>
              <ContentChart :patient-data="itemData" />
            </a-scrollbar>
          </a-tab-pane>
          <a-tab-pane key="2" title="添加监护">
            <IndicatorTable :patient-details="patientDetails" :patient-id="patientId" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineAsyncComponent } from 'vue';

  const ContentChart = defineAsyncComponent(() => import('./components/content-chart.vue'));
  const PresInfo = defineAsyncComponent(() => import('./components/presInfo.vue'));
  const LeftBox = defineAsyncComponent(() => import('./components/leftBox.vue'));
  const IndicatorTable = defineAsyncComponent(() => import('./components/indicatorTable.vue'));

  const activeKey = ref('1'); // 默认激活第一个tab
  const itemData = ref<Record<string, any>>({}); // 默认激活第一个tab
  const patientDetails = ref<any[]>([]); // 患者详情数据
  const patientId = ref<number | null>(null); // 患者ID
  
  const leftBoxClick = (data: { type: string; data: Record<string, any> }) => {
    itemData.value = data.data;
    // 将患者详情数据传递给indicatorTable组件
    patientDetails.value = data.data.detailsList || [];
    // 将患者ID传递给indicatorTable组件
    patientId.value = data.data.id || null;
  };
</script>

<script lang="ts">
  export default {
    name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
  };
</script>

<style lang="less" scoped>
  .container {
    padding: 0 20px 20px 20px;
    margin-bottom: 20px;
    width: 100%;
    height: calc(100vh - 124px);
  }
  .mainContent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
  }

  .leftBox {
    background-color: #fff;
    width: 280px;
    margin-right: 10px;
    padding: 20px 15px;
  }

  .rightBox {
    width: calc(100% - 290px);
  }
  .presInfoBox {
    padding: 20px 15px;
    background-color: #fff;
    margin-bottom: 10px;
  }
</style>